﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="SlideShow.ascx.cs" Inherits="SlideShow" %>
<style>
    #pictures {
        width:214px;
        height:122px;
        float:left;

    }
    #previous,#next {
        width:30px;
        height:122px;        
        background-color:#DADADA;
        color:#CA0002;
        line-height:122px;
    }
    #previous {
        float:left;
    }
    #next {
        float:left;        
    }
    .link {
        text-decoration:none;         
    }
        .link:hover {
            color:darkblue;
        }
    #caption {
        width:214px;
        height:30px;
        line-height:30px;        
        margin:0px auto;
        top:92px;
        z-index:98;        
        position:relative;
        background-color:#DADADA;
        opacity:0.2;
    }
    #wrapper {   
        position:relative;     
        width:276px;
        height:122px;
        margin:0px auto;
    }
    #caption_content {
        font-size:16px;        
        z-index:99;
        line-height:30px;
        position:relative;
        margin:0px auto;
        top:-30px;
        height:0px;
        color:black;
        font-weight:bold;
    }
</style>

<div id="wrapper">
    <div id="previous"> <a class="link" onclick="showPrevious()"> << </a> </div>
    <a href="Home.aspx">
    <div id="pictures">
    <img alt="" src="Images/121116071425-alan-greenspan-cnni-tvbox-velshi-intv-getty-left-tease.jpg"/>
    <img alt="" src="Images/121121093822-lake-toys-r-us-ceo-intv-00002802-left-tease.jpg"/>
    <img alt="" src="Images/left-tease.jpg"/>
    <img alt="" src="Images/nintendo-wii-u-left-tease.jpg"/>
    <img alt="" src="Images/seg-france-downgrade-00013618-left-tease.jpg"/>    
    </div>  
    </a>
    
    <div id="next"> <a class="link" onclick="showNext()"> >> </a> </div>
    <a href="Home.aspx">
    <div id="caption"></div>
    <div id="caption_content"></div>
    </a>
</div>

<div id="captions">
    <span>Greatest Ever?</span>
    <span>why now?</span>
    <span>Honda think Pink</span>
    <span>Freedom Project</span>
    <span>Why they Demonstrate</span>
</div>
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    var currentIndex = -1;
    var currentImage;
    var mytimer;
    $(document).ready(function () {
        $('#pictures img').css({'display':'none'});
         //mytimer = setTimeout("showNext()", 1000);
        showNext(); //load first
    })

    function showNext() {
        var len = $('#pictures img').length;
        var next = currentIndex < (len - 1) ? (currentIndex + 1) : 0;
        showImage(next);
    }

    function showPrevious() {
        var len = $('#pictures img').length;
        var previous = currentIndex > 0 ? currentIndex - 1 : len - 1;
        showImage(previous);
    }
    function showImage(index) {
        var indexImage = $('#pictures img')[index];
        var Pcaption = $('#captions span')[index];
        if (currentImage) {
            $(currentImage).css({'display':'none'});
        }
        $(indexImage).css({ 'display': 'block' });
        $('#caption_content').text($(Pcaption).text());
        currentIndex = index;
        currentImage = indexImage;
        //mytimer = setTimeout('showNext()',1000);
    }
</script>
